<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-operation" *ngIf="activeIndex !== jobOriginType.HANDLED">
  <lv-group>
    <ng-container *ngIf="!hideExeJobBtn()">
      <lv-pro-button-group [config]="optsConfig" [bindData]="selectionData">
      </lv-pro-button-group>
    </ng-container>
    <ng-container *ngIf="cookieService.role !== 5 && !hideExeJobBtn()">
      <button lv-button [disabled]="!tableData?.total" (click)="exportJob()" pmpermission pmOperation='ExportJob'
        class="job-export-btn" [ngClass]="{'mgl': activeIndex === jobOriginType.EXE}">
        {{'common_download_all_label' | i18n}}
      </button>
    </ng-container>
    <ng-container *ngIf="cookieService.role !== 5 && activeIndex === jobOriginType.HISTORIC && showRetry">
      <button lv-button [disabled]="!tableData?.total" (click)="batchRetry()" pmpermission pmOperation='ExportJob'
        class="mgl-16">
        {{'common_batch_retry_label' | i18n}}
      </button>
    </ng-container>
  </lv-group>
  <lv-group lvGutter="10px">
    <lv-group lvGutter='8px'>
      <span>{{ 'common_sla_label' | i18n: []:true }}</span>
      <lv-select [lvOptions]='slaNameOps' [(ngModel)]="slaNameData" (ngModelChange)='changeSlaName($event)'
        lvMode='multiple' lvShowFilter lvMaxTagCount="3" lvFilterKey='label' lvFilterMode='contains'
        lvShowClear style="width: 260px;" [lvVirtualScroll]="slaNameOps?.length > 10">
      </lv-select>
    </lv-group>
    <lv-group>
      <span style="width: 100px;">{{ 'common_start_time_label' | i18n: []:true }}</span>
      <lv-date-range-picker [(ngModel)]="rangeDate" lvShowTime="true" (ngModelChange)="changePickerMode($event)">
      </lv-date-range-picker>
    </lv-group>
  </lv-group>
</div>
<div class="list-container double-row-height" [ngClass]="{'resource-detail-job': !!selectedResource}">
  <lv-pro-table #dataTable [config]="tableConfig" [data]="tableData"></lv-pro-table>
</div>

<ng-template #typeTpl let-item>
  <div lv-overflow>
    <span class="aui-link" id="outerClosable" (click)="getDetail(item)">
      {{ jobTypeMapping(item.type) }}
      <i *ngIf="item.type === dataMap.Job_type.groupBackup.value" lv-icon="aui-icon-help"
        lv-tooltip="{{ 'explore_group_backup_tip_label' | i18n }}" lvTooltipPosition="rightTop" lvTooltipTheme="light"
        lvColorState="true"></i>
    </span>
  </div>
</ng-template>

<ng-template #statusTpl let-item>
  <ng-container *ngIf="
      ['RUNNING', 'READY', 'ABORTING'].includes(item.status);
      else elseTemplate
    ">
    <ng-container *ngIf="'ABORTING' === item.status; else elseTemplate1">
      <div class="aborting-progress">
        <lv-progress [lvValue]="item.progress" [lvWidth]="100" [lvStatus]="'normal'" [lvColors]="abortingColors">
        </lv-progress>
      </div>
    </ng-container>
    <ng-template #elseTemplate1>
      <lv-progress [lvValue]="item.progress" [lvWidth]="100" [lvStatus]="'normal'" [lvColors]="colors">
      </lv-progress>
      <span *ngIf="item.additionalStatus">
        {{ item.additionalStatus | textMap: 'Additional_Status' }}
      </span>
    </ng-template>
  </ng-container>
  <ng-template #elseTemplate>
    <aui-status [value]="item.status" type="Job_status"></aui-status>
    <span *ngIf="item.additionalStatus && item.status === 'FAIL'">
      {{ item.additionalStatus | textMap: 'Additional_Status' }}
    </span>
  </ng-template>
</ng-template>

<ng-template #sourceNameTpl let-item>
  <p lv-overflow [ngClass]="{'aui-link': activeIndex === jobOriginType.HANDLED}" (click)="clickSourceName(item)">
    {{ item.sourceName | nil }}
  </p>
  <p class="aui-text-help-sm" lv-overflow *ngIf="getSourceNameDesc(item)">
    {{ getSourceNameDesc(item) }}
  </p>
</ng-template>

<ng-template #startTimeTpl let-item>
  <span lv-overflow>{{
    item.startTime | date: 'yyyy/MM/dd HH:mm:ss':timeZone | nil
    }}</span>
</ng-template>

<ng-template #sourceSubTypeTpl let-item>
  <ng-container *ngIf="
      cookieService.isCloudBackup && item.sourceSubType === 'S3.storage';
      else elseTemplate1
    ">
    {{ 'common_backup_storage_label' | i18n }}
  </ng-container>
  <ng-template #elseTemplate1>
    <ng-container
      *ngIf="[dataMap.Resource_Type.FusionCompute.value, dataMap.Resource_Type.fusionOne.value].includes(item.sourceSubType) && item.sourceType && item.sourceType !== 'VM'; else elseTemplate">
      {{ item.sourceType + '__and__' + item.sourceSubType | textMap: 'Job_Target_Type'}}
    </ng-container>
    <ng-template #elseTemplate>
      <span lv-overflow>
        {{ item.sourceSubType | textMap: 'Job_Target_Type'}}
      </span>
    </ng-template>
  </ng-template>
</ng-template>

<ng-template #eventStatusTpl let-item>
  <ng-container *ngIf="hasLogEvent(item.logLevels); else elseEventTemplate">
    <lv-group lvGutter='4px'>
      <i *ngIf="hasWarning(item.logLevels)" lv-icon="aui-icon-job-log-warning"
        lv-tooltip="{{'common_alarms_warning_label' | i18n}}"></i>
      <i *ngIf="hasError(item.logLevels)" lv-icon="aui-icon-job-log-error"
        lv-tooltip="{{'common_error_label' | i18n}}"></i>
      <i *ngIf="hasFatal(item.logLevels)" lv-icon="aui-icon-job-log-critical"
        lv-tooltip="{{'common_fatal_label' | i18n}}"></i>
    </lv-group>
  </ng-container>
  <ng-template #elseEventTemplate>
    --
  </ng-template>
</ng-template>

<ng-template #handleHeaderTpl>
  <div class="lv-modal-title">
    {{'common_handle_label' | i18n}}
  </div>
</ng-template>

<ng-template #markStatusTpl let-item>
  <span lv-overflow [ngClass]="{'aui-link': item?.markStatus === dataMap.markStatus.retried.value}"
    (click)="retriedJobDetail(item)">
    {{item?.markStatus | textMap:'markStatus'}}
  </span>
</ng-template>